<!--vue模板-->
<template>
  <div>
    <el-form
      :model="customer"
      label-width="auto"
      style="
        max-width: 1000px;
        margin: auto;
        background-color: #fff;
        padding: 20px;
      "
    >
      <div
        style="
          background-color: #fff;
          height: 30px;
          line-height: 30px;
          border-bottom: solid 1px #ccc;
          margin-bottom: 10px;
        "
      >
        基础信息
      </div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="市场:">
            <el-select
              v-model="customer.market"
              placeholder="请选择 内销、外销"
            >
              <el-option
                v-for="item in marketOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="国家:">
            <el-select v-model="customer.country" placeholder="请选择">
              <el-option
                v-for="item in countryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户公司名称:">
            <el-input v-model="customer.company" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="机型:">
            <el-input v-model="customer.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="成交或询价产品:">
            <el-checkbox-group>
              <el-checkbox label="配件" value="配件" />
              <el-checkbox label="固定设备" value="固定设备" />
              <el-checkbox label="移动设备" value="移动设备" />
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="感兴趣的产品:">
            <el-input v-model="customer.product" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户联系人:">
            <el-input v-model="customer.contactName" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户联系手机:">
            <el-input v-model="customer.mobile" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户邮箱:">
            <el-input v-model="customer.customer_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板联系人:">
            <el-input v-model="customer.boss" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="老板联系手机:">
            <el-input v-model="customer.boss_phone" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="老板邮箱:">
            <el-input v-model="customer.boss_email" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="联系地址:">
            <el-input v-model="customer.address" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户目的港口:">
            <el-input v-model="customer.target_port" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户分类:">
            <el-input v-model="customer.company" placeholder="请输入" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户类型:">
            <el-input v-model="customer.model" placeholder="请输入" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="公司简介:">
            <textarea rows="5" cols="150" style="border: #ccc solid 1px" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="客户目的地:">
            <el-input v-model="customer.destination" placeholder="请输入" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="目的地和快递地是否一致:">
            <el-radio-group v-model="customer.isFit">
              <el-radio :value="1">一致</el-radio>
              <el-radio :value="0">不一致</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <el-form-item label="快递地址:">
            <el-input v-model="customer.dourier_address" />
          </el-form-item>
        </el-col>
      </el-row>

      <div
        style="
          background-color: #fff;
          height: 30px;
          line-height: 30px;
          border-bottom: solid 1px #ccc;
          margin-bottom: 10px;
        "
      >
        账号信息
      </div>
      <el-form-item label="归属销售">
        <el-input class="ipt" />
      </el-form-item>
      <el-form-item label="账号:">
        <el-input v-model="customer.account" class="ipt" />
      </el-form-item>
      <el-form-item label="密码:">
        <el-input v-model="customer.password" type="password" class="ipt" />
      </el-form-item>
      <el-form-item label="密码验证手机号:">
        <el-input v-model="customer.validMobile" class="ipt" />
      </el-form-item>
    </el-form>

    <div style="text-align: center; margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { saveCustomer } from "@/api/customer.js";
import { ElMessage } from "element-plus";
//路由实例
const router = useRouter();
//市场选项
const marketOptions = [
  {
    label: "内销",
    value: 1
  },
  {
    label: "外销",
    value: 2
  }
];

//国家选项
const countryOptions = ref([]);

//表单对象
const customer = ref({
  account: "",
  address: "",
  boss: "",
  boss_email: "",
  boss_phone: "",
  cid: 0,
  company: "",
  company_profile: "",
  contactName: "",
  country: "",
  customer_email: "",
  customer_type: 0,
  destination: "",
  dourier_address: "",
  id: 0,
  interestPid: 0,
  interestProduct: "",
  isFit: 0,
  market: 1,
  mobile: "",
  model: "",
  password: "",
  product: "",
  saleId: 0,
  source: 0,
  target_port: "",
  validMobile: ""
});

//取消
function close() {
  router.push("/customer/list");
}

//保存
async function save() {
  console.log(customer.value);
  //保存
  let res = await saveCustomer(customer.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }
}
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.ipt {
  width: 300px;
}
</style>
